<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="../bootstrap/js/jquery-3.5.1.js"></script>
    <script src="../js/lib/jquery-1.10.2.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>
<div class="container-fluid" style="margin-top: 20px">
    <form id="form-like">
    <div class="row">
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                    <input name="name" class="form-control"  placeholder="姓名">
                </div>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class="form-group">
                <label class="col-sm-3 control-label">电话</label>
                <div class="col-sm-9">
                    <input name="tel" class="form-control"  placeholder="电话">
                </div>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label">保险类型</label>
                <div class="col-sm-9">
                    <input  name="intention" class="form-control"  placeholder="保险类型">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 ">
            <div class="form-group">
                <label for="" class="col-sm-3 control-label">咨询顾问</label>
                <div class="col-sm-9">
                    <input name="uid" class="form-control"  placeholder="咨询顾问">
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-3 col-md-offset-9" style="text-align: right">
            <input id="btn-like" type="button" class="btn btn-warning " value="查询"/>
        </div>
    </div>
    </form>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-12">
            <table id="tab-show" class="table table-striped" style="width: 90%;text-align: center" align="center">
                <tr style="font-weight: 700">
                    <td>姓名</td>
                    <td>性别</td>
                    <td>手机号</td>
                    <td>公司</td>
                    <td>投保产品</td>
                    <td>咨询顾问</td>
                    <td>操作</td>
                </tr>
<!--                <tr>-->
<!--                    <td>张三</td>-->
<!--                    <td>男</td>-->
<!--                    <td>13200000000</td>-->
<!--                    <td>清华大学</td>-->
<!--                    <td>教育年金保险</td>-->
<!--                    <td>八戒</td>-->
<!--                    <td>-->
<!--                        <button data-toggle="modal" data-target="#myModal" type="button" class="btn btn-primary">查看详情</button>-->
<!--                    </td>-->
<!--                </tr>-->
            </table>
        </div>
    </div>

    <!--分页 begin-->
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="Page navigation" style="float: right">
                <ul class="pagination">
<!--                    <li><a href="#">1</a></li>-->
                </ul>
            </nav>

        </div>
    </div>
    <!--分页 end-->






    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">详细信息</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label style="padding: 0;text-align: center" class="col-sm-4 control-label">姓名</label>
                                    <div id="name-show" class="col-sm-8">
                                        张三
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label style="padding: 0;text-align: center" class="col-sm-4 control-label">性别</label>
                                    <div id="sex-show" class="col-sm-8">
                                        男
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label style="padding: 0;text-align: center" class="col-sm-4 control-label">生日</label>
                                    <div id="birthday-show" class="col-sm-8">
                                        2020-07-07
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label style="padding: 0;text-align: center" class="col-sm-4 control-label">手机号</label>
                                    <div id="tel-show" class="col-sm-8">
                                        1320000000
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" style="padding: 0;text-align: center">公司名称</label>
                                    <div id="company-show" class="col-sm-9">
                                        阿里巴巴
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">职位</label>
                                    <div id="position-show" class="col-sm-9">
                                        挖掘机司机
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" style="padding: 0;text-align: center">家庭住址</label>
                                    <div id="addr-show" class="col-sm-9">
                                        山东省济南市银河路19号清华小区2号楼三单元
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" style="padding: 0;text-align: center">兴趣爱好</label>
                                    <div id="hobby-show" class="col-sm-9">
                                        吃饭；睡觉；打豆豆
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" style="padding: 0;text-align: center">QQ号</label>
                                    <div id="qq-show" class="col-sm-9">
                                        123456
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">微信</label>
                                    <div id="wx-show" class="col-sm-9">
                                        zhangsan_123
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" style="padding: 0;text-align: center">婚姻状况</label>
                                    <div id="marrystatus-show" class="col-sm-9">
                                        已婚
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                            </div>
                        </div>

                    </div>
                    <span style="font-weight: 700">已购保险产品</span>
                    <table id="tab-contract" style="text-align: center" class="table ">
                        <tr style="font-weight: 700">
                            <td>保险产品</td>
                            <td>合同编号</td>
                            <td style="width:20%">开始时间</td>
                            <td style="width:20%">结束时间时间</td>
                            <td style="width:10%">状态</td>
                        </tr>
<!--                        <tr>-->
<!--                            <td>大病无忧险</td>-->
<!--                            <td>123456</td>-->
<!--                            <td>2020-01-03</td>-->
<!--                            <td>2020-07-01</td>-->
<!--                            <td>到期</td>-->
<!--                        </tr>-->

                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增跟踪记录 begin -->
    <!-- Modal -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="">新增跟踪记录</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-3">详情</div>
                            <div class="col-sm-9">
                                <textarea class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-3">意向</div>
                            <div class="col-sm-9">
                                <select class="form-control">
                                    <option>===请选择===</option>
                                    <option>无</option>
                                    <option>健康保险</option>
                                    <option>儿童保险</option>
                                    <option>意外保险</option>
                                    <option>年金保险</option>
                                    <option>父母保险</option>
                                    <option>高端医疗险</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增跟踪记录 end -->

</div>
<script type="text/javascript">

    var flag=true;
    $(function () {

        count();
        show(1);
    })

    function show(index) {

        $.ajax({
            url:"/customer/All?index="+index,
            type:"get",
            dataType:"json",
            success:function (result) {
                if(result.state==2000){
                    for(let list of result.data ){
                        let sex;
                        if(list.sex==0){
                            sex="女";
                        }else {
                            sex="男";
                        }

                        $("#tab-show").append("<tr cid='"+list.id+"'>" +
                            "<td>"+list.name+"</td>" +
                            "<td>"+sex+"</td>" +
                            "<td>"+list.tel+"</td>" +
                            "<td>"+list.company+"</td>" +
                            "<td>"+list.intention+"</td>" +
                            "<td>"+list.uid+"</td>" +
                            "<td>" +
                            "<button  data-toggle='modal' data-target='#myModal' type='button' class='btn btn-primary btn-show'>查看详情</button>" +
                            "</td>" +
                            "</tr>")
                    }


                    //点击查看详情
                    $(".btn-show").click(function () {
                        let cid=$(this).parents("tr").attr("cid");
                        for(let l of result.data ){
                            if(l.id==cid){
                                let se;
                                if(l.sex==0){
                                    se="女";
                                }else {
                                    se="男";
                                }
                                let marry;
                                if(l.marrystatus==0){
                                    marry="未婚";
                                }else {
                                    marry="已婚";
                                }
                                $("#name-show").text(l.name)
                                $("#tel-show").text(l.tel)
                                $("#sex-show").text(se)
                                $("#birthday-show").html(l.birthday)
                                $("#company-show").html(l.company)
                                $("#position-show").html(l.position)
                                $("#addr-show").html(l.addr)
                                $("#hobby-show").html(l.hobby)
                                $("#qq-show").html(l.qq)
                                $("#wx-show").html(l.wx)
                                $("#marrystatus-show").html(marry)
                                $("#intention-show").html(l.intention)


                            }
                        }
                        follow(cid)



                    })
                }else {
                    alert(result.message)
                    flag=false;
                    // console.log("flag="+flag)
                }
            }
        })
    }

    $("#btn-like").click(function () {
        if(!flag){
            alert("权限不够！")
            return;
        }
        $("#tab-show").children().remove()
        $("#tab-show").append("<tr style=\"font-weight: 700\">\n" +
            "<td>姓名</td>" +
            "<td>性别</td>" +
            "<td>手机号</td>" +
            "<td>公司</td>" +
            "<td>投保意向</td>" +
            "<td>咨询顾问</td>" +
            "<td>操作</td>" +
            "</tr>")

        $.ajax({
            url:"/customer/likeAll",
            data:$("#form-like").serialize(),
            type:"post",
            dataType: "json",
            success:function (result) {
                if(result.state==2000){

                    for(list of result.data ){
                        let sex;
                        if(list.sex==0){
                            sex="女";
                        }else {
                            sex="男";
                        }

                        $("#tab-show").append("<tr cid='"+list.id+"'>" +
                            "<td>"+list.name+"</td>" +
                            "<td>"+sex+"</td>" +
                            "<td>"+list.tel+"</td>" +
                            "<td>"+list.company+"</td>" +
                            "<td>"+list.intention+"</td>" +
                            "<td>"+list.uid+"</td>" +
                            "<td>" +
                            "<button  data-toggle='modal' data-target='#myModal' type='button' class='btn btn-primary btn-show'>查看详情</button>" +
                            "</td>" +
                            "</tr>")


                    }
                    //点击查看详情
                    $(".btn-show").click(function () {
                        let cid=$(this).parents("tr").attr("cid");
                        for(let l of result.data ){
                            if(l.id==cid){
                                let se;
                                if(l.sex==0){
                                    se="女";
                                }else {
                                    se="男";
                                }
                                let marry;
                                if(l.marrystatus==0){
                                    marry="未婚";
                                }else {
                                    marry="已婚";
                                }
                                $("#name-show").text(l.name)
                                $("#tel-show").text(l.tel)
                                $("#sex-show").text(se)
                                $("#birthday-show").html(l.birthday)
                                $("#company-show").html(l.company)
                                $("#position-show").html(l.position)
                                $("#addr-show").html(l.addr)
                                $("#hobby-show").html(l.hobby)
                                $("#qq-show").html(l.qq)
                                $("#wx-show").html(l.wx)
                                $("#marrystatus-show").html(marry)
                                $("#intention-show").html(l.intention)


                            }
                        }
                        follow(cid)



                    })




                }
            }
        })
    })






//index下标
    function count (){
        $.ajax({
            url:"/customer/countAll",
            type:"get",
            dataType:"json",
            success:function (result) {

                if(result.state==2000){
                    if(result.data==0){
                        return;
                    }
                    let num=result.data/5;
                    if(num>parseInt(num)){
                        num++;
                    }
                    for(let i=1;i<=num;i++){
                        $(".pagination").append(" <li><a >"+i+"</a></li>");
                    }

                }else {
                    alert("出现错误")
                }
                $(".pagination").children().click(function () {
                    console.log("点击获取坐标")
                    let index=$(this).text();

                    $("#tab-show").children().remove()
                    $("#tab-show").append("<tr style=\"font-weight: 700\">\n" +
                        "                    <td>姓名</td>\n" +
                        "                    <td>性别</td>\n" +
                        "                    <td>手机号</td>\n" +
                        "                    <td>公司</td>\n" +
                        "                    <td>投保意向</td>\n" +
                        "                    <td>咨询顾问</td>\n" +
                        "                    <td>操作</td>\n" +
                        "                </tr>")
                    show(index)
                })
            }
        });
    }
//详情中的合同遍历
    function follow(cid) {
        $("#tab-contract").children().remove()
        $("#tab-contract").append("<tr style='font-weight: 700'>" +
            "<td>保险产品</td>" +
            "<td>合同编号</td>" +
            "<td style='width:20%'>开始时间</td>" +
            "<td style='width:20%'>结束时间时间</td>" +
            "<td style='width:10%'>状态</td>" +
            "</tr>")
        $.ajax({
            url:"/customer/find/contract?cid="+cid,
            type:"get",
            dataType:"json",
            success:function (result) {
                if(result.state==2000){
                    var date =renderTime(new Date());
                    let start;
                    let end;
                        for(let l of result.data){
                        end=renderTime(l.end)
                        start=renderTime(l.start)
                        let time=date>end?'到期':'生效';
                        $("#tab-contract").append("<tr>" +
                            "<td>"+l.insurancetype+"</td>" +
                            "<td>"+l.num+"</td>" +
                            "<td>"+start+"</td>" +
                            "<td>"+end+"</td>" +
                            "<td>"+time+"</td>" +
                            "</tr>")
                    }
                }
            }
        })
    }
//转换时间
    function renderTime(date) {
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }


</script>



</body>
</html>